<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
  <title>壹脉智能CRM</title>
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <link href="./css/perfect-scrollbar.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
  <link href="css/colors/default.css" id="theme" rel="stylesheet">
  <link rel="stylesheet" href="css/diy.min.css">
</head>

<body class="fix-header fix-sidebar card-no-border">
  <div class="preloader">
    <div class="loader">
      <div class="loader__figure"></div>
      <p class="loader__label">壹脉</p>
    </div>
  </div>
  <div id="main-wrapper">
    <header class="topbar">
      <nav class="navbar top-navbar navbar-expand-md navbar-light">
        <div class="navbar-header">
          <a class="navbar-brand" href="../index.html">
            <b>
              <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo" />
              <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
            </b>
            <span>
              <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
            </span>
          </a>
        </div>
        <div class="navbar-collapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
            <li class="nav-item"><a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
          </ul>
          <user-head></user-head>
        </div>
      </nav>
    </header>
    <aside class="left-sidebar">
      <div class="scroll-sidebar">
        <company-position></company-position>
        <nav class="sidebar-nav p-0">
          <c-slider current="6"></c-slider>
        </nav>
      </div>
    </aside>
    <div class="page-wrapper">
      <div class="container-fluid">
        <div class="row page-titles">
          <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">订单管理</h3>
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
              <li class="breadcrumb-item active">订单管理</li>
            </ol>
          </div>
        </div>
        <!--列表-->
        <div class="row bgfff">
          <ul class="nav w100p nav-tabs customtab position-relative" role="tablist">
            <li class="nav-item" v-for="(v,k) in navs" :key="k">
              <a class="nav-link curpointer" data-toggle="tab" role="tab" :class="v.id == navs_id ? 'active' : '' " @click="changeNav(v.id)">
                <span class="hidden-sm-up">
                  <i class="ti-home"></i>
                </span>
                <span class="hidden-xs-down">{{v.label}}</span>
              </a>
            </li>
          </ul>
          <div class="d-flex p-t-20 w100p p-r-31 p-b-17">
            <div class="mr-auto d-flex p-l-30 fs14 cfff lh30 align-cen">
              <span class="p-l-20 p-r-19 bradius4 m-r-10 bgblue" @click="exportOrder">导出</span>
            </div>
            <div class="ml-auto d-flex align-cen">
              <div class="m-r-21">
                <vuejs-datepicker input-class="form-control p-l-23 phgray bgfff" v-model="date" :clear-button="true" :language="language" format="yyyy-MM-dd" placeholder="请选择时间" name="uniquename">
                </vuejs-datepicker>
              </div>
              <span class="bgblue p-l-20 p-r-19 bradius4 m-r-10 cfff fs14 lh30" @click="search">查询</span>
            </div>
          </div>
          <div class="row w100p p-l-30">
            <div class="col-12">
              <div class="card m-b-0">
                <table id="example23" class="align-cen-table textc display nowrap table table-hover table-bordered bgf6f9fa m-b-20 fixed-table text-ellipsis">
                  <thead>
                    <tr>
                      <th>
                        <!--<input type="checkbox">-->
                        <span class="w16 h16 bradius4 bced d-inline-block mdi position-relative top3"
                              :class="allChecks? 'mdi-check checks' : '' "
                              @click="checkAll"
                        ></span>
                      </th>
                      <th class="w68">序号</th>
                      <th width="180px">订单编号</th>
                      <th>用户姓名</th>
                      <th>联系方式</th>
                      <th>收货地址</th>
                      <th>商品名称</th>
                      <th>产品规格</th>
                      <th>订单金额</th>
                      <th>下单时间</th>
                      <th>订单状态</th>
                      <th>订单来源</th>
                      <th>备注</th>
                      <th width="180px">操作</th>
                    </tr>
                  </thead>
                  <tbody class="bgfff">
                    <tr v-for="(v,k) in lists" :key="k" class="curpointer">
                      <td @click.stop="">
                        <span class="w16 h16 bradius4 bced d-inline-block mdi position-relative top3 11111111"
                              :class="selectRows.includes(v) ? 'mdi-check checks':''"
                              @click.stop="chooseRow(v)"></span>
                      </td>
                      <td>{{v.ordersId}}</td>
                      <td :title="v.ordersNo">{{v.ordersNo}}</td>
                      <td :title="v.nickeName">{{v.nickeName}}</td>
                      <td :title="v.phone">{{v.phone}}</td>
                      <td :title="v.locationAddress + v.detailedAddress">{{v.locationAddress + v.detailedAddress}}</td>
                      <td :title="v.goodsName">{{v.goodsName}}</td>
                      <td :title="v.specAttribute">{{v.specAttribute}}</td>
                      <td>{{v.orderPrice | formatMoney}}</td>
                      <td :title="v.createTime | formatDate('yyyy-MM-dd hh:mm:ss')">{{v.createTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</td>
                      <td>{{v.refundState | state2str(v.orderState)}}</td>
                      <td :title="v.assembleId">{{v.assembleId ? '拼团订单' : '个人订单'}}</td>
                      <td :title="v.remark">{{v.remark}}</td>
                      <!--<td class="c26">跟进人</td>-->
                      <td>
                        <span class="cblue" v-if="v.orderState == 0" @click="delExpireOrder(v.ordersId)">
                          删除
                        </span>
                        <span class="cblue" v-else-if="v.orderState == 1" @click="confirmMsg(v.ordersId, 5, 1)">
                          撤销订单
                        </span>
                        <span class="cblue" v-else-if="v.orderState == 2 && v.refundState == 1" @click="confirmMsg(v.ordersId, 3, 1)">
                          确认发货
                        </span>
                        <template v-else-if="v.refundState == 2">
                          <span class="cblue" @click="confirmMsg(v.ordersId, 1, 2)">
                            拒绝退款
                          </span>
                          <span class="cblue" @click="confirmMsg(v.ordersId, 3, 2)">
                            确定退款
                          </span>
                        </template>
                        <template v-else>-</template>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <div class="textc" v-if=" !lists.length || lists.length < 0">暂无数据</div>
              </div>
              <!--分页-->
              <div class="d-flex p-b-50 jsend">
                <page-helper :page-number="page" :total-count="total" @change="jumpPage"></page-helper>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- All Jquery -->
  <!-- ============================================================== -->
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap popper Core JavaScript -->
  <!-- <script src="../assets/node_modules/bootstrap/js/popper.min.js"></script> -->
  <script src="js/bootstrap.min.js"></script>
  <script src="js/perfect-scrollbar.jquery.min.js"></script>
  <script src="js/sidebarmenu.js"></script>
  <!--Custom JavaScript -->
  <script src="js/custom.min.js"></script>
  <script src="js/layer/layer.js"></script>
  <script src="js/vue.js"></script>
  <script src="js/vuejs-datepicker.min.js"></script>
  <script src="js/zh.js"></script>
  <script src="js/config.js"></script><script src="js/extend.js"></script>
  <script>
  $(function() {
    var vw = new Vue({
      el: '#main-wrapper',
      components: { vuejsDatepicker },
      // components:{header},
      data: {
        searchKey: '',
        searchCondition: '',
        // 选中列表
        selectRows: [],
        // 员工列表
        lists: [],
        // 总数
        total: 0,
        page: 1,
        navs_id: '',
        navs: [
          { id: '', label: '全部' },
          { id: '1', label: '待付款' },
          { id: '2', label: '待发货' },
          { id: '3', label: '待收货' },
          { id: '4', label: '已完成' },
          { id: '5', label: '退款/售后' },
        ],
        date: '',
        language: language,
      },
      mounted() {
        this.getOrderList();
      },
      methods: {
        delExpireOrder(ordersId) {
          layer.confirm('确定要删除这个订单吗？', {
            skin: 'confirm-class',
            btn: ['取消', '确定']
          }, (i => {
            layer.close(i);
          }), () => {
            $.cAjax('/crmPc/orders/delOrders', {
              data: {
                ordersId: ordersId,
              }
            }).then(res => {
              layer.msg('删除成功');
              this.getOrderList();
            });

            return false;
          });

        },
        confirmMsg(ordersId, state, type) {
          let obj = {
            1: {
              5: '确定要撤销该订单吗？',
              3: '是否确定发货？',
            },
            2: {
              1: '是否拒绝退款？',
              3: '是否确定退款',
            }
          };
          let text = obj[type][state];


          layer.confirm(text, {
            skin: 'confirm-class',
            btn: ['取消', '确定']
          }, (idx) => {
            layer.close(idx);
          }, () => {
            if (type == 1) {
              this.changeOrderState(ordersId, state);
            } else {
              this.changeRefund(ordersId, state);
            }
          });
        },
        changeRefund(ordersId, state) {
          $.cAjax('/crmPc/orders/updateRefundState', {
            data: {
              refundState: state,
              ordersId: ordersId,
            }
          }).then((data) => {
            layer.msg('操作成功');
            this.getOrderList();
          });
        },
        changeOrderState(ordersId, state) {
          $.cAjax('/crmPc/orders/updateOrderState', {
            data: {
              orderState: state,
              ordersId: ordersId,
            }
          }).then((data) => {
            layer.msg('操作成功');
            this.getOrderList();
          });
        },
        changeNav(id) {
          this.navs_id = id;
          this.page = 1;
          this.getOrderList();
        },
        search() {
          let formatDate = Vue.filter('formatDate');
          this.searchCondition = this.date ? formatDate(this.date, 'yyyy-MM-dd') : '';
          this.page = 1;
          this.getOrderList();
        },
        exportOrder(){
          let formatDate = Vue.filter('formatDate');
          this.searchCondition = this.date ? formatDate(this.date, 'yyyy-MM-dd') : '';
          this.selectRows = [];
          const data =  {
                    orderState: this.navs_id,
                    createTimes: this.searchCondition,
                    }
          fetch($.baseUrl + '/crmPc/orders/exportOrdersInfoPc?data=' + $.base64.encode(JSON.stringify(data)), {
            headers: {
              token: localStorage.getItem('token'),
              'content-type': 'application/x-www-form-urlencoded'
            },
            method: 'POST',
          }).then(res => {
            console.log(res)
            return res.blob();
          }).then(res => {
            console.log(res)
            let link = document.createElement('a');
            let url = window.URL.createObjectURL(res);
            link.href = url;
            link.download = '订单列表.xls';

            link.click();
            window.URL.revokeObjectURL(url);
          });
        },
        checkAll() {
          this.allChecks = !this.allChecks;
        },
        chooseRow(row) {
          let idx = this.selectRows.indexOf(row);
          if (idx != -1) {
            this.selectRows.splice(idx, 1);
          } else {
            this.selectRows.push(row);
          }
        },
        jumpPage({ currentPage }) {
          this.page = currentPage;
          this.getOrderList();
        },
        getOrderList() {
          this.selectRows = [];
          $.cAjax('/crmPc/orders/selectOrdersInfoPc', {
            data: {
              pageNum: this.page,
              orderState: this.navs_id,
              createTimes: this.searchCondition,
            }
          }).then(res => {
            if (res) {
              this.lists = res.pageInfo.list;
              this.total = res.pageInfo.total;
            } else {
              this.lists = [];
              this.total = 0;
            }
          })
        },
      },
      computed: {
        allChecks: {
          get() {
            return this.selectRows.length && (this.selectRows.length == this.lists.length);
          },
          set(val) {
            if (val) {
              this.selectRows = [...this.lists];
            } else {
              this.selectRows = [];
            }
          },
        }
      },
      filters: {
        state2str(refundState, state) {
          let obj = {
            1: {
              0: '已失效',
              1: '待付款',
              2: '待发货',
              3: '待收货',
              4: '已完成',
              5: '取消订单',
              6: '退款成功',
            },
            2: '退款中',
            3: '退款成功',
          };

          return refundState == 1 ? obj[refundState][state] : obj[refundState];
        },
      }
    })
  })
  </script>
</body>

</html>
